<template>
  <div>
    <div class="text-right">
      <el-button type="primary" @click="visible = true">添加跟进记录</el-button>
    </div>
    <div class="h-auto" v-loading="loading">
      <el-timeline>
        <template v-for="(group, groupIndex) in groupedData" :key="groupIndex" :timestamp="group.date" type="primary"
          placement="top">
          {{ group.date }}
          <el-timeline>
            <el-timeline-item v-for="(item, itemIndex) in group.items" :key="itemIndex"
              :timestamp="item.add_time.split(' ')[1] + ' ' + item.add_user_name" :color="item.background_color"
              placement="top">
              <el-card class="relative" :style="{ backgroundColor: item?.background_color }">
                <p>【联系方式】{{ item.method }}</p>
                <p v-if="item.method === '电话'">【是否接听】{{ item.is_pick_mobile ? '是' : '否' }}</p>
                <p class="whitespace-pre-line">
                  【备注】{{ item.remark }}
                </p>
                <div class="absolute top-2 right-2 cursor-pointer" @click.stop="onStar(item)">
                  <el-icons name="StarFilled" :color="item.is_star ? '#f7ba2a' : '#e0e0e0'" size="1.5rem" />
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </template>
      </el-timeline>
      <EmptyImg v-if="groupedData.length === 0" msg="暂无跟进记录"></EmptyImg>
    </div>
    <el-dialog v-model="visible" title="添加跟进记录" width="500px" destroy-on-close append-to-body>
      <AddRecord :arrearsDataId="info.arrears_data_id" @success="onAddSuccess" @close="visible = false" />
    </el-dialog>
  </div>
</template>

<script setup>
import { arrearsTraceServer } from '@/api/arrears'
import { ref } from 'vue'
import AddRecord from './AddRecord.vue'
import { ElMessage } from 'element-plus'
const props = defineProps({
  info: {
    type: Object,
    default: () => ({}),
  },
})
const emit = defineEmits(['success'])

// 计算属性，按日期分组数据
const groupedData = ref([])

const loading = ref(false);
const getRecordTimeData = async () => {
  if (!props.info.arrears_data_id) return;

  loading.value = true
  try {
    const { data } = await arrearsTraceServer.get({ arrears_data_id: props.info.arrears_data_id })
    const groups = {};
    (data || []).forEach((item) => {
      const date = item.add_time.split(' ')[0]
      if (!groups[date]) {
        groups[date] = { date, items: [] }
      }
      groups[date].items.push(item)
    })
    groupedData.value = Object.values(groups).sort((a, b) => new Date(b.date) - new Date(a.date))
  } catch (error) {
    console.error(error);
  }
  loading.value = false
}
getRecordTimeData();

const visible = ref(false)
const onAddSuccess = () => {
  getRecordTimeData()
  emit('success')
}

const onStar = async (trace) => {
  await arrearsTraceServer.put({
    trace_id: trace.trace_id,
  })
  if (trace.is_star) {
    ElMessage.success('取消收藏成功');
  } else {
    ElMessage.success('收藏成功');
  }
  getRecordTimeData();
  emit('success')
}
</script>
